<template>
  <div class="drawer-wrapper drawer">
    <el-drawer
      class="drawer-el-cont"
      title=""
      :size="widthSize"
      :direction="'rtl'"
      :visible.sync="isShowing"
      :with-header="false"
      :modal="false"
    >
      <div class="drawer-content">
        <div class="theme-img-wrapper">
          <div class="theme-title">更换背景</div>
          <div class="theme-img">
            <img src="../../assets/bg/bg-1.jpg" alt="" srcset="" />
            <span class="theme-text" @click="toShowSelModelFN">更换壁纸</span>
          </div>
          <div class="sel-slider">
            <div class="slider-item">
              <span>遮罩浓度:</span>
              <div class="slider-com">
                <sliderCom :sliderType="'mark'" />
              </div>
            </div>
            <div class="slider-item">
              <span>模糊度:</span>
              <div class="slider-com">
                <sliderCom :sliderType="'blur'" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <themeSelCom :isShowing='isThemeShowing' @close="toCloseThemeSelFn"/>
    </el-drawer>
  </div>
</template>

<script>
// import mySlider from "../../components/mySlider.vue";
import sliderCom from "../../components/sliderCom.vue";
import themeSelCom from './themeSelCom.vue';
export default {
  name: "drawerOptions",
  props: ["isShowing", "size"],
  components: { sliderCom ,themeSelCom},
  data() {
    return {
      initOptions: {
        size: 420,
      },
      showDrawer: false,
      widthSize: 0,
      isThemeShowing:false
    };
  },
  created() {
    // 宽度赋值
    this.widthSize = this.size ? this.size : this.initOptions.size;
  },
  mounted() {},
  methods: {
    toShowSelModelFN() {
      // this.$emit('change')
      this.isThemeShowing= !this.isThemeShowing
      console.log(this.isThemeShowing)
    },
    toCloseThemeSelFn(){
      this.isThemeShowing = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.drawer-wrapper {
}
.drawer-content {
  width: 100%;
  height: 100%;
}
.theme-img-wrapper {
  width: 90%;
  // height: 300px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 15px;
  
}
.theme-img {
  width: 100%;
  height: 190px;
  position: relative;
  &:hover {
    .theme-text {
      opacity: 1;
      transition: opacity linear 0.5s;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.theme-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba($color: #000000, $alpha: 0.6);
  color: #fff;
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  opacity: 0;
  font-family: "黑体";
  font-weight: 700;
}
.sel-slider {
  .slider-item {
    // display: flex;
    // align-items:center;
    margin-top: 10px;
    // justify-content: center;
    &:first-child {
      margin-bottom: 10px;
    }
    span {
      width: 65px;
      font-size: 14px;
    }
    div {
      // flex: 1;
      // margin-left: 10px;
    }
    .slider-com {
      margin: 5px auto;
    }
  }
}
.theme-title {
  font-size: 16px;
  font-family: "黑体";
  font-weight: 700;
  color: #000;
  margin: 5px 0 10px;
}
</style>
